<!DOCTYPE html>
<html>
    <head>
        <!--GALLERY TEMPLATE-->
        <script type="text/template" id="qq-template">
            <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
                <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                </div>
                <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                    <span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>
                </div>
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>Upload a file</div>
                </div>
                <span class="qq-drop-processing-selector qq-drop-processing">
                    <span>Processing dropped files...</span>
                    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                </span>
                <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
                    <li>
                        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                        <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                        </div>
                        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                        <div class="qq-thumbnail-wrapper">
                            <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                        </div>
                        <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                        <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                            <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                            Retry
                        </button>

                        <div class="qq-file-info">
                            <div class="qq-file-name">
                                <span class="qq-upload-file-selector qq-upload-file"></span>
                                <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                            </div>
                            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                            <span class="qq-upload-size-selector qq-upload-size"></span>
                            <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                                <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                            </button>
                            <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                                <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                            </button>
                            <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                                <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                            </button>
                        </div>
                    </li>
                </ul>

                <dialog class="qq-alert-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">Close</button>
                    </div>
                </dialog>

                <dialog class="qq-confirm-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">No</button>
                        <button type="button" class="qq-ok-button-selector">Yes</button>
                    </div>
                </dialog>

                <dialog class="qq-prompt-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <input type="text">
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">Cancel</button>
                        <button type="button" class="qq-ok-button-selector">Ok</button>
                    </div>
                </dialog>
            </div>

        </script>

        <!--THUMBNAILS TEMPLATE-->
        <!--<script type="text/template" id="qq-template">-->
            <!--<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">-->
                <!--<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">-->
                    <!--<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>-->
                <!--</div>-->
                <!--<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>-->
                    <!--<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>-->
                <!--</div>-->
                <!--<div class="qq-upload-button-selector qq-upload-button">-->
                    <!--<div>Upload a file</div>-->
                <!--</div>-->
                <!--<span class="qq-drop-processing-selector qq-drop-processing">-->
                    <!--<span>Processing dropped files...</span>-->
                    <!--<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>-->
                <!--</span>-->
                <!--<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">-->
                    <!--<li>-->
                        <!--<div class="qq-progress-bar-container-selector">-->
                            <!--<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>-->
                        <!--</div>-->
                        <!--<span class="qq-upload-spinner-selector qq-upload-spinner"></span>-->
                        <!--<img class="qq-thumbnail-selector" qq-max-size="100" qq-server-scale>-->
                        <!--<span class="qq-upload-file-selector qq-upload-file"></span>-->
                        <!--<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>-->
                        <!--<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">-->
                        <!--<span class="qq-upload-size-selector qq-upload-size"></span>-->
                        <!--<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>-->
                        <!--<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>-->
                        <!--<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>-->
                        <!--<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>-->
                    <!--</li>-->
                <!--</ul>-->

                <!--<dialog class="qq-alert-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">Close</button>-->
                    <!--</div>-->
                <!--</dialog>-->

                <!--<dialog class="qq-confirm-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">No</button>-->
                        <!--<button type="button" class="qq-ok-button-selector">Yes</button>-->
                    <!--</div>-->
                <!--</dialog>-->

                <!--<dialog class="qq-prompt-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<input type="text">-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">Cancel</button>-->
                        <!--<button type="button" class="qq-ok-button-selector">Ok</button>-->
                    <!--</div>-->
                <!--</dialog>-->
            <!--</div>-->
        <!--</script>-->

        <!--SIMPLE TEMPLATE-->
        <!--<script type="text/template" id="qq-template">-->
            <!--<div class="qq-uploader-selector qq-uploader" qq-drop-area-text="Drop files here">-->
                <!--<div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">-->
                    <!--<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>-->
                <!--</div>-->
                <!--<div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>-->
                    <!--<span class="qq-upload-drop-area-text-selector">Drop files here to upload</span>-->
                <!--</div>-->
                <!--<div class="qq-upload-button-selector qq-upload-button">-->
                    <!--<div>Upload a file</div>-->
                <!--</div>-->
                <!--<span class="qq-drop-processing-selector qq-drop-processing">-->
                    <!--<span>Processing dropped files...</span>-->
                    <!--<span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>-->
                <!--</span>-->
                <!--<ul class="qq-upload-list-selector qq-upload-list" aria-live="polite" aria-relevant="additions removals">-->
                    <!--<li>-->
                        <!--<div class="qq-progress-bar-container-selector">-->
                            <!--<div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>-->
                        <!--</div>-->
                        <!--<span class="qq-upload-spinner-selector qq-upload-spinner"></span>-->
                        <!--<span class="qq-upload-file-selector qq-upload-file"></span>-->
                        <!--<span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename"></span>-->
                        <!--<input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">-->
                        <!--<span class="qq-upload-size-selector qq-upload-size"></span>-->
                        <!--<button type="button" class="qq-btn qq-upload-cancel-selector qq-upload-cancel">Cancel</button>-->
                        <!--<button type="button" class="qq-btn qq-upload-retry-selector qq-upload-retry">Retry</button>-->
                        <!--<button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">Delete</button>-->
                        <!--<span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>-->
                    <!--</li>-->
                <!--</ul>-->

                <!--<dialog class="qq-alert-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">Close</button>-->
                    <!--</div>-->
                <!--</dialog>-->

                <!--<dialog class="qq-confirm-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">No</button>-->
                        <!--<button type="button" class="qq-ok-button-selector">Yes</button>-->
                    <!--</div>-->
                <!--</dialog>-->

                <!--<dialog class="qq-prompt-dialog-selector">-->
                    <!--<div class="qq-dialog-message-selector"></div>-->
                    <!--<input type="text">-->
                    <!--<div class="qq-dialog-buttons">-->
                        <!--<button type="button" class="qq-cancel-button-selector">Cancel</button>-->
                        <!--<button type="button" class="qq-ok-button-selector">Ok</button>-->
                    <!--</div>-->
                <!--</dialog>-->
            <!--</div>-->
        <!--</script>-->

        <title>Fine Uploader Development</title>
        <meta charset="utf-8" />
        <link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <link href="../../_build/fine-uploader-gallery.css" rel="stylesheet" type="text/css"/>
        <link href="../../_build/fine-uploader-new.css" rel="stylesheet" type="text/css"/>
        <!--<link href="../../_build/fine-uploader.css" rel="stylesheet" type="text/css"/>-->
        <link href="styles.css" rel="stylesheet" type="text/css"/>
        <script src="../../_build/all.fine-uploader.js"></script>
        <script src="../../node_modules/pica/dist/pica.js"></script>
        <script src="devenv.js"></script>
    </head>
    <body>
        <ul id="foobar"></ul>
        <h1>Fine Uploader Development</h1>

        <img id="paste-test-img" src="http://fineuploader.smartimage.com/thumbnail/c7DolT/960px/Fine-Uploader-Avatar.png?ref=ce8936f6e"/>

        <div id="examples">
            <div class="example">
                <h3>Manually Trigger Uploads</h3>
                <ul id="manual-example" class="unstyled"></ul>
                <button type="button" id="triggerUpload" class="btn btn-primary">Upload Queued Files</button>
            </div>

            <div class="example">
                <h3>FU S3</h3>
                <ul id="s3-example" class="unstyled"></ul>
            </div>

            <div class="example">
                <h3>FU Azure</h3>
                <ul id="azure-example" class="unstyled"></ul>
            </div>

            <div class="example">
                <h3>See server failure messages</h3>
                <ul id="failure-example" class="unstyled"></ul>
            </div>

            <div class="example">
                <h3>Various Options</h3>
                <ul id="validation-example" class="unstyled"></ul>
            </div>

            <div class="example">
                <h3>FineUploaderBasic</h3>
                <div id="core-example"></div>
                <div id="fubUploadButton" class="btn btn-primary"><div>Select Files</div></div>
            </div>
        </div>
    </body>
</html>

